String.prototype.format = function(args) {
    var result = this;
    if (arguments.length > 0) {
        if (arguments.length == 1 && typeof (args) == "object") {
            for (var key in args) {
                if(args[key]!=undefined){
                    var reg = new RegExp("({" + key + "})", "g");
                    result = result.replace(reg, args[key]);
                }
            }
        }
        else {
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] != undefined) {
                    var reg= new RegExp("({)" + i + "(})", "g");
                    result = result.replace(reg, arguments[i]);
                }
            }
        }
    }
    return result;
}

async function draw(data) {


    var c = document.getElementById("box");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, WORLD_SIZE, WORLD_SIZE);
    for (let i = 0; i < data.length; i++) {
        const d = data[i];
        const x = d[0] + WORLD_SIZE / 2;
        const y = d[1] + WORLD_SIZE / 2;
        const r = d[2];
        const hp=d[7];

        ctx.fillStyle = "rgba({0}, {1}, {2}, {3})".format(d[3],d[4],d[5],d[6]/255);
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fill();

        if(hp>1){
            ctx.font="20px Arial";
            ctx.fillStyle="#000000";
            ctx.fillText(String(hp),x,y)
        }

    }
}